import { memo, useEffect, useRef } from "react";
import type { FC, MutableRefObject, ReactNode } from "react";
import styles from "./index.module.scss";

interface Props {
  children: ((e: MutableRefObject<any>) => React.ReactElement) | ReactNode;
  style?: React.CSSProperties;
}

const Index: FC<Props> = ({ children, style }) => {
  const siderBar = useRef<any>(null);
  const scrollWrapper = useRef<any>(null);
  // const [loading, setLoading] = useState(false)
  useEffect(() => {
    // siderBar.current = document.getElementById('siderbar')
  }, []);
  const isFuncCom = typeof children === "function";
  // const isSiderBarNeedHiden = () => {
  //   if (window.innerWidth > 1100) {
  //     if (siderBar.current) {
  //       siderBar.current.style.display = "";
  //     }
  //     return;
  //   }

  //   if (scrollWrapper.current.scrollTop === 0) {
  //     if (siderBar.current) {
  //       // siderBar.current.style.display = 'block'
  //     }
  //   } else if (
  //     scrollWrapper.current.scrollHeight -
  //       scrollWrapper.current.scrollTop -
  //       window.innerHeight <
  //     10
  //   ) {
  //     if (siderBar.current) {
  //       // siderBar.current.style.display = 'none'
  //     }
  //   } else {
  //     if (siderBar.current) {
  //       // siderBar.current.style.display = 'block'
  //     }
  //   }
  // };
  useEffect(() => {
    // isSiderBarNeedHiden()
  });
  return (
    <div
      className={styles.scrollWrapper}
      ref={scrollWrapper}
      style={style}
      // onScroll={isSiderBarNeedHiden}
    >
      {/* {
      currentTab === 'list'
        ? <div className={styles.topBar} >
          <div></div>
          <button disabled={loading} className={styles.button} onClick={async () => {
            setLoading(true)
            await exportAndDownloadByBuffer(downloadFile({ htmlString }))
            setLoading(false)
          }}>
            {
              loading ? <Loading style={{ width: '16px' }} /> : null
            }
      下载
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 19 18" ><path fillRule="evenodd" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.6" d="M11.552 2.071H6.563c-1.544 0-2.875 1.252-2.875 2.797v8.053c0 1.632 1.243 2.915 2.875 2.915h5.991c1.545 0 2.797-1.37 2.797-2.915V6.028l-3.799-3.957z" clipRule="evenodd"></path><path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.6" d="M11.354 2.063v2.181a1.93 1.93 0 001.927 1.932c.987.002 1.997.003 2.066-.002M9.23 12.01V7.08M7.102 9.872l2.128 2.139 2.13-2.139"></path></svg>
          </button>
        </div>
        : null
    } */}

      {isFuncCom ? children(scrollWrapper) : children}
    </div>
  );
};

export default memo(Index);
